<template>
	<view class="">
		<cu-custom bgColor="bg-E96141" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">检测项目</block>
		</cu-custom>
		
		<!-- 缩略图 -->
		<view class="small-image-con">
			<view class="item" v-for="(item, index) in jcxmList" :key="item.id">
				<image :src="item.imageUrl" 
					mode="aspectFill"
					class="cover-img"
					@tap="previewMultiImg(index)"></image>
				<view class="title">{{item.title}}</view>
			</view>
		</view>
		
		<!-- 多张图片查看器 -->
		<previewImage ref="previewImage" :opacity="0.8"
			:imgs="jcxmDetailItemImage" 
			:descs="jcxmTitle" 
			:rotateBtn="false"
			:circular="false"
			:saveBtn="false"></previewImage>
	</view>
</template>

<script>
	import previewImage from '@/components/preview-image/preview-image.vue'
	import moment from 'moment'
	
	export default {
		name: "checkItemList",
		components: {
			previewImage	
		},
		data() {
			return {
				jcxmList: [],		//检测项目-原始数据
				jcxmTitle: [],
				jcxmCoverImage: [],
				jcxmDetailItemImage: [],
			}
		},
		created() {
			this.loadJcxmList()
		},
		methods: {
			//检测项目-加载
			loadJcxmList(){
				uni.showLoading({
					title: '加载中..',
					mask: true,
				})
				let that = this
				let _params = {
					pageNo: 1,
					pageSize: 30
				}
				that.$http.get("/banner/swiperBanner/checkItemlist", {params:_params}).then(res=>{
					if(res.data.success){
						uni.hideLoading()
						that.jcxmList = res.data.result.records
						if(that.jcxmList && that.jcxmList.length>0){
							let _item = {}
							for(let i=0;i<that.jcxmList.length;i++){
								_item = that.jcxmList[i]
								that.jcxmTitle.push(_item.title)
								that.jcxmCoverImage.push(_item.imageUrl)
								that.jcxmDetailItemImage.push(_item.detailItemImage)
							}
						}
					}else{
						uni.hideLoading()
						that.jcxmList = []
						that.$tip.toast(res.data.message);
					}
				}).catch(err => {
					uni.hideLoading()
					that.jcxmList = []
				});
			},
			//长按事件
			longPress(data) {
				uni.showModal({
					showCancel: false,
					title: '长按事件',
					content: '已触发长按事件,你可以在这里做更多',
					success: showResult => {
					}
				});
			},
			// 预览图片多张
			previewMultiImg(index) {
				if(index<0 || index>=this.jcxmDetailItemImage.length){
					return false
				}
				let _param = this.jcxmDetailItemImage[index]
				this.$refs.previewImage.open(index);
			},
		}
	}
</script>

<style lang="scss" scoped>

/* 缩略图 */
.small-image-con{
	height: auto;
	overflow: hidden;
	display:flex;
	flex-wrap:wrap;
	padding: 20upx;
	.item{
		display:flex;
		flex-direction: column;
		width: 48%;
		height: 330upx;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 25upx;
		border-radius: 15upx;
		border: 1px solid #ececec;
		&:nth-child(2n+1){
			margin-right: 4%;
		}
		.cover-img{
			width: 100%;
			height: 250upx;
		}
		.title{
			font-size: $uni-font-size-lg;
			color: $uni-text-color;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			border: 0px solid #f00;
			margin: 15upx 0;
			padding: 0 15upx;
		}
	}
}
	
</style>
